<template>
  <div>
    <el-dialog
      @opened="initEditor"
      :title="form.id ? '编辑商品' : '添加商品'"
      :visible.sync="isshow"
      @close="reset"
    >
      <el-form :model="form" :rules="rules" ref="goodsForm">
        <el-form-item
          label="一级分类"
          :label-width="formLabelWidth"
          prop="first_cateid"
        >
          <el-select
            @change="select"
            v-model="form.first_cateid"
            placeholder="请选择一级菜单"
          >
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="二级分类"
          :label-width="formLabelWidth"
          prop="second_cateid"
        >
          <el-select v-model="form.second_cateid" placeholder="请选择二级菜单">
            <el-option
              v-for="item in secondList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="商城名称"
          :label-width="formLabelWidth"
          prop="goodsname"
        >
          <el-input
            clearable
            v-model="form.goodsname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <el-input
            clearable
            v-model="form.price"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="市场价格"
          :label-width="formLabelWidth"
          prop="market_price"
        >
          <el-input
            clearable
            v-model="form.market_price"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.pid != 0 || !form.id"
          label="图片"
          :label-width="formLabelWidth"
        >
          <el-upload
            :on-preview="preview"
            :on-exceed="exceed"
            :file-list="imgUrl"
            action=""
            :auto-upload="false"
            list-type="picture-card"
            :on-change="getFile"
            :on-remove="removeFile"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item
          label="商品规格"
          :label-width="formLabelWidth"
          prop="specsid"
        >
          <el-select
            @change="select2"
            v-model="form.specsid"
            placeholder="请选择商品规格"
          >
            <el-option
              v-for="item in specsList"
              :key="item.id"
              :label="item.specsname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="规格属性"
          :label-width="formLabelWidth"
          prop="specsattr"
        >
          <el-select
            multiple
            v-model="form.specsattr"
            placeholder="请选择规格属性"
          >
            <el-option
              v-for="(item, index) in attrList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否新品" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isnew">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否热卖" :label-width="formLabelWidth">
          <el-radio-group v-model="form.ishot">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <div id="div1"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { goodsaddedit, goodsinfo } from "../../request/api";
import { mapState, mapActions } from "vuex";
import E from "wangeditor";
export default {
  props: ["pageData"],
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      editor: null,
      secondList: [],
      attrList: [],
      isshow: false,
      dialogTableVisible: false,
      formLabelWidth: "120px",
      imgUrl: [],
      form: {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: "",
        description: "",
        specsid: "",
        specsattr: "",
        isnew: 1,
        ishot: 1,
        status: 2,
      },
      rules: {
        first_cateid: [
          { required: true, message: "请选择一级分类", trigger: "blur" },
        ],
        second_cateid: [
          { required: true, message: "请选择二级分类", trigger: "blur" },
        ],
        goodsname: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        market_price: [
          { required: true, message: "请输入市场价格", trigger: "blur" },
        ],
        specsid: [
          { required: true, message: "请选择商品规格", trigger: "blur" },
        ],
        specsattr: [
          { required: true, message: "请输入规格属性", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState("cate", ["cateList"]),
    ...mapState("specs", ["specsList"]),
  },
  mounted() {
    if (this.cateList.length == 0) {
      this.getCateList();
    }
    this.getSpecsList(true);
  },
  methods: {
    ...mapActions("cate", ["getCateList"]),
    ...mapActions("specs", ["getSpecsList"]),
    ...mapActions("goods", ["getGoodsCount", "getGoodsList"]),
    initEditor() {
      if (this.editor || this.form.id) {
        return;
      }
      this.editor = new E("#div1");
      this.editor.create();
    },
    reset() {
      this.isshow = false;
      this.editor.txt.html("");
      this.$refs.goodsForm.resetFields();
      this.imgUrl = [];
      this.form = {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: "",
        description: "",
        specsid: "",
        specsattr: "",
        isnew: 1,
        ishot: 1,
        status: 2,
      };
    },
    getFile(file) {
      this.form.img = file.raw;
    },
    removeFile() {
      this.form.img = "";
    },
    exceed() {
      this.$message.error("上传的文件个数超出限制");
    },
    preview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    select(e, a = true) {
      if (!this.form.id || a) {
        this.form.second_cateid = "";
      }
      this.secondList = this.cateList.filter(
        (item) => item.id == e
      )[0].children;
    },
    select2(e, a = true) {
      if (!this.form.id || a) {
        this.form.specsattr = [];
      }
      this.attrList = this.specsList.filter((item) => item.id == e)[0].attrs;
    },
    submitForm() {
      this.$refs.goodsForm.validate((val) => {
        if (!val) {
          return;
        }
        this.form.description = this.editor.txt.html();
        let url = this.form.id ? "/goodsedit" : "/goodsadd";
        this.form.specsattr = this.form.specsattr.join();
        goodsaddedit(url, this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            // if (this.form.id) this.getGoodsList();
            this.getGoodsCount(this.form.id ? false : true);
            this.reset();
            return;
          }
          this.$message.error(res.msg);
        });
      });
    },
    getInfo(id) {
      this.isshow = true;
      goodsinfo({ id }).then((res) => {
        if (res.code == 200) {
          this.form = res.list;
          this.form.id = id;
          if (!this.editor) {
            this.editor = new E("#div1");
            this.editor.create();
          }
          this.form.specsattr = res.list.specsattr.split(",");
          this.imgUrl = res.list.img
            ? [{ url: "http://localhost:3000" + res.list.img }]
            : [];
          this.select(res.list.first_cateid, false);
          this.select2(res.list.specsid, false);
          this.editor.txt.html(res.list.description);
        }
      });
    },
  },
};
</script>

<style scoped>
</style>